import * as React from "react";
import Box from "@mui/material/Box";
import BottomNavigation from "@mui/material/BottomNavigation";
import BottomNavigationAction from "@mui/material/BottomNavigationAction";
import RestoreIcon from "@mui/icons-material/Restore";
import FavoriteIcon from "@mui/icons-material/Favorite";
import LocationOnIcon from "@mui/icons-material/LocationOn";
import { useGlobalVariablesController } from "../../context/GlobalContext";
import { Icon } from "@mui/material";
import { ArrowDownward, ArrowUpward } from "@mui/icons-material";

const navStyle = {
  position: "fixed",
  bottom: 0,
  width: `calc(100% - 240px)`,
  marginLeft: 240,
  background: "#fff",
  height: "36px",
};

export default function SimpleBottomNavigation() {
  const [controller, dispatch] = useGlobalVariablesController();
  const { aria2GetGlobalStat } = controller;

  const [value, setValue] = React.useState(0);

  return (
    <Box style={navStyle}>
      <Box
        component="ul"
        sx={({ breakpoints }) => ({
          display: "flex",
          flexWrap: "wrap",
          alignItems: "center",
          justifyContent: "center",
          listStyle: "none",
          mt: 3,
          mb: 0,
          p: 0,

          [breakpoints.up("lg")]: {
            mt: 0,
          },
        })}
      >
        <Box fontSize="14" color="text" mb={-0.5} mx={0.25}>
          <ArrowDownward />
          {aria2GetGlobalStat.downloadSpeed}/s
        </Box>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <Box fontSize="14" color="text" mb={-0.5} mx={0.25}>
          <ArrowUpward />
          {aria2GetGlobalStat.uploadSpeed}/s
        </Box>
      </Box>
    </Box>
  );
}
